<template>
  <div id="sumdiv">
    <div id="nav">
      <a-row type="flex">
        <a-col :span="2" :order="1"><img src="./img/party.jpg" class="navimg"/></a-col>
        <a-col :span="4" :order="2" id="sign">实验办公室联合部</a-col>
        <a-col :span="2" :order="3"><router-link to="/" id="link">首页</router-link></a-col>
        <a-col :span="3" :order="4"><router-link to="/desc" id="link">支部概况</router-link></a-col>
        <a-col :span="3" :order="5"><router-link to="/job" id="link">工作动态</router-link></a-col>
        <a-col :span="3" :order="6"><router-link to="/build" id="link">思想建设</router-link></a-col>
        <a-col :span="3" :order="7"><router-link to="/study" id="link">学习资料</router-link></a-col>
        <a-col :span="2" :order="8"><a-input-search placeholder="搜索" @search="onSearch"/></a-col>
        <a-col :span="2" :order="9" id="mycol">

          <a-button @click="showModal" v-if="!this.getLoginState">登录</a-button>
          <a-dropdown :trigger="['click']" v-else>
            <a class="ant-dropdown-link" href="#">
              <a-button>{{ this.getUserName }}</a-button>
            </a>
            <a-menu slot="overlay">
              <a-menu-item key="0">
              </a-menu-item>
              <a-menu-item key="1">
                <router-link to="/back">后台管理</router-link>
              </a-menu-item>
              <a-menu-item key="2">
                <a-button @click="handleLogout">注销</a-button>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
          <a-modal
            title="帐户密码登录"
            v-model="visible"
            :footer="null"
            style="text-align:center;"
            width="350px"
            :destroyOnClose="true"
          >
            <a-form
              id="components-form-demo-normal-login"
              :form="form"
              class="login-form"
              @submit="handleSubmit"
            >
              <a-form-item>
                <a-input
                  v-decorator="[
                    'userId',
                    { rules: [{ required: true, message: '请输入账号!'}] }
                  ]"
                  placeholder="账号"
                  style="width:80%;"
                >
                  <a-icon
                    slot="prefix"
                    type="user"
                    style="color: rgba(0,0,0,.25)"
                  />
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-input
                  v-decorator="[
                    'password',
                    { rules: [{ required: true, message: '请输入密码!'}] }
                  ]"
                  type="password"
                  placeholder="密码"
                  style="width:80%;"
                >
                  <a-icon
                    slot="prefix"
                    type="lock"
                    style="color: rgba(0,0,0,.25)"
                  />
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-button
                  type="primary"
                  html-type="submit"
                  class="login-form-button"
                  @click="handleSubmit"
                >
                  登录
                </a-button>
              </a-form-item>
            </a-form>
          </a-modal>
        </a-col>
      </a-row>
      <div id="main">
        <slot name="main"></slot>
      </div>
    </div>
  </div>
</template>

<script>
// import { login, isLogin, logout } from '@/api/login'
import { login, isLogin, logout } from '@/api/login'
import { Userlogin } from '@/api/file'
export default {
  name: 'Navy',
  data () {
    return {
      visible: false
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  computed: {
    getLoginState: function () {
      return this.$store.getters.isLogin
    },
    getUserName: function () {
      return this.$store.getters.nickname
    }
  },
  methods: {
    showModal () {
      this.visible = true
    },
    handleOk () {
      this.visible = false
    },
    onSearch (value) {
      console.log(value)
    },
    handleLogout () {
      logout()
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          var params = {
            'userId': values.userId,
            'password': values.password
          }
          Userlogin(params).then((res) => {
            if (res.status) {
              login(values.userId, values.password)
              if (isLogin()) {
                this.visible = false
                this.$store.dispatch('GenerateRoutes')
              }
            } else {
              this.$message.info('用户名或密码错误！')
            }
          })
        }
      })
    }
  }
}
</script>

<style>
#sumdiv{
  background-color:rgba(227, 231, 233, 0.822);
  height: 2500px;
}
#mycol{
  position:absolute;
  right:-50px;
}
#main{
  width: 1500px;
  height: 2000px;
  background-color: rgba(240, 245, 247, 0.945);
  margin: 0 auto;
}
#sign{
  color: #fff;
  font-size:xx-large;
  font-weight: bold;
}
#nav{
  background:red;
  height: 80px;
  line-height: 70px
}
#link{
  font-size:large;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 0px 40px;
}
.navimg{
  height: 80px;
  width: 80px;
  }
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-button {
  width: 80%;
}
</style>
